<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorate="body/main">
<head>
    <meta charset="UTF-8">
    <title>客户关系管理系统</title>
</head>
<body>
<div class="right_col" role="main" layout:fragment="content">
    <div class="">
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>
                            历史订单 <i class="fa fa-user"></i><small th:text="${session.loginUser.usrName }">用户名</small>
                        </h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <form>
                            <input type="hidden" name="index" value="1" />
                            <ul>
                                <li>
                                    <div class="form-group">
                                        <label class="control-label col-md-4 col-sm-4 col-xs-12">客户名称</label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input name="custName" type="text" class="form-control col-md-7 col-xs-12" th:value="${custName}" readonly>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">客户编号</label>
                                        <div class="col-md-7 col-sm-7 col-xs-12">
                                            <input name="custNo" type="text" class="form-control col-md-7 col-xs-12" th:value="${custNo}" readonly>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_content">
                        <p class="text-muted font-13 m-b-30"></p>
                        <div id="datatable-responsive_wrapper"
                             class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                            <div class="row">
                                <div class="col-sm-12">
                                    <a th:href="@{/api/customer/findByCustomerList}" class="btn btn-success btn-sm" >返回</a>
                                    <table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed"
                                           cellspacing="0" width="100%" role="grid" aria-describedby="datatable-responsive_info" style="width: 100%;">
                                        <thead>
                                        <tr role="row">
                                            <th class="sorting_asc" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="First name: activate to sort column descending"
                                                aria-sort="ascending">订单编号</th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                日期</th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                送货地址</th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                状态</th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="tbody">
                                        <tr role="row" class="odd" id="odd">
<!--                                            <td tabindex="0" class="sorting_1" th:text="${#dates.format(ctivity.atvDate,'yyyy-MM-dd HH:mm:ss')}"></td>-->
<!--                                            <td th:text="${ctivity.atvPlace}"></td>-->
<!--                                            <td th:text="${ctivity.atvTitle}"></td>-->
<!--                                            <td th:text="${ctivity.atvDesc}"></td>-->
<!--                                            <td th:text="${ctivity.atvRemark}"></td>-->
<!--                                            <td>-->
<!--                                                <div class="btn-group">-->
<!--                                                    <button type="button" class="btn btn-danger">点击操作</button>-->
<!--                                                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">-->
<!--                                                        <span class="caret"></span>-->
<!--                                                        <span class="sr-only">Toggle Dropdown</span>-->
<!--                                                    </button>-->
<!--                                                    <ul class="dropdown-menu" role="menu">-->
<!--                                                        <li>-->
<!--                                                            <a class="saleSwichOpen" saleSwitch="open" data-toggle="tooltip" data-placement="top" title=""-->
<!--                                                               th:href="@{/api/activity/getContactRecords(atvId=${ctivity.atvId},custName=${custName})}" >编辑</a>-->
<!--                                                        </li>-->
<!--                                                        <li>-->
<!--                                                            <a class="addVersion" data-toggle="tooltip" data-placement="top" title=""-->
<!--                                                               href="#"th:onclick="'javascript:doDel(this,'+${ctivity.atvId}+');'">删除</a>-->
<!--                                                        </li>-->
<!--                                                    </ul>-->
<!--                                                </div>-->
<!--                                            </td>-->
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row" id="page">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script layout:fragment="js" th:inline="javascript">
    function utc2beijing(utc_datetime) {
        // 转为正常的时间格式 年-月-日 时:分:秒
        var T_pos = utc_datetime.indexOf('T');
        var Z_pos = utc_datetime.indexOf('Z');
        var year_month_day = utc_datetime.substr(0,T_pos);
        var hour_minute_second = utc_datetime.substr(T_pos+1,Z_pos-T_pos-1);
        var new_datetime = year_month_day+" "+hour_minute_second; // 2017-03-31 08:02:06

        // 处理成为时间戳
        timestamp = new Date(Date.parse(new_datetime));
        timestamp = timestamp.getTime();
        timestamp = timestamp/1000;

        // 增加8个小时，北京时间比utc时间多八个时区
        var timestamp = timestamp+8*60*60;

        // 时间戳转为时间
        var beijing_datetime = new Date(parseInt(timestamp) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
        return beijing_datetime; // 2017-03-31 16:02:06
    }
    $(document).ready(function (){
        page(1,5);
    });
    function pageLimit(index){
        page(index,5);
    }
    function page(index,limit){
        let frm = document.forms[0];
        $.ajax({
            type:"POST",
            url:"/crm/api/customer/findHistOrder",
            data:{index:index,limit:limit,custName:frm.custName.value},
            success:function (data){
                $("#tbody").html("");
                var td = "";
                var dataJSON = JSON.parse(data);
                console.log(JSON.parse(data));
                for (var i = 0; i < dataJSON.ordersPage.records.length; i++){
                    var date = utc2beijing(dataJSON.ordersPage.records[i].odrDate);
                    td += "<tr role=\"row\" class=\"odd\"><td tabindex=\"0\" class=\"sorting_1\" >"+dataJSON.ordersPage.records[i].odrId+"</td>";
                    td += "<td>"+date+"</td>";
                    td += "<td>"+dataJSON.ordersPage.records[i].odrAddr+"</td>";
                    if(dataJSON.ordersPage.records[i].odrStatus == 5){
                        td += "<td>已发货</td>";
                    }else{
                        td += "<td>已回款</td>";
                    }
                    td += "<td><div class=\"btn-group\"><button type=\"button\" class=\"btn btn-danger\">点击操作</button>" +
                        "<button type=\"button\" class=\"btn btn-danger dropdown-toggle\" data-toggle=\"dropdown\" aria-expanded=\"false\">" +
                        "<span class=\"caret\"></span><span class=\"sr-only\">Toggle Dropdown</span></button>" +
                        "<ul class=\"dropdown-menu\" role=\"menu\"><li><a class=\"saleSwichOpen\" saleSwitch=\"open\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"\"" +
                        "href=\"/crm/api/customer/getOrder?odrId="+dataJSON.ordersPage.records[i].odrId+"\" >查看订单详情</a>" +
                        "</li></ul></div></td></tr>";
                }
                $("#tbody").html(td);

                $("#page").html("");
                var page = "<div class=\"col-sm-5\">" +
                    "<div class=\"dataTables_info\" id=\"datatable-responsive_info\"" +
                    " role=\"status\" aria-live=\"polite\">共<span>"+dataJSON.ordersPage.total+"</span>条记录" +
                    " <span>"+dataJSON.ordersPage.current+"</span>/<span>"+dataJSON.ordersPage.pages+"</span>页</div>" +
                    " </div>" +
                    " <div class=\"col-sm-7\">" +
                    " <div class=\"dataTables_paginate paging_simple_numbers\"" +
                    " id=\"datatable-responsive_paginate\">" +
                    " <ul class=\"pagination\">";
                if(dataJSON.ordersPage.current > 1){
                    page += " <li class=\"paginate_button previous\">" +
                        "<a href=\"#\" onclick=\"pageLimit(1);\"" +
                        "aria-controls=\"datatable-responsive\" data-dt-idx=\"0\"" +
                        " tabindex=\"0\">首页</a>" +
                        " </li>" +
                        " <li class=\"paginate_button \" }\"><a" +
                        " href=\"#\" onclick=\"pageLimit("+(dataJSON.ordersPage.current-1)+");\"" +
                        " aria-controls=\"datatable-responsive\" data-dt-idx=\"1\"" +
                        " tabindex=\"0\">上一页</a>" +
                        " </li>";
                }
                if(dataJSON.ordersPage.current < dataJSON.ordersPage.pages){
                    page += " <li class=\"paginate_button \"><a" +
                        " href=\"#\" onclick=\"pageLimit("+(dataJSON.ordersPage.current+1)+");\"" +
                        " aria-controls=\"datatable-responsive\" data-dt-idx=\"1\"" +
                        " tabindex=\"0\">下一页</a>" +
                        " </li>" +
                        " <li class=\"paginate_button next\"><a" +
                        " href=\"#\" onclick=\"pageLimit("+dataJSON.ordersPage.pages+");\"" +
                        " aria-controls=\"datatable-responsive\" data-dt-idx=\"7\"" +
                        "tabindex=\"0\">最后一页</a>" +
                        " </li>" +
                        " </ul>" +
                        " </div>" +
                        " </div>";
                }
                $("#page").html(page);
            },
            error:function (data){
                alert("对不起，获取数据失败！");
            }
        })
    }
</script>
</html>